
<template>
  <div class="number-list">
    <div v-for="(item, index) in list" :key="index">
      <NumTo :startVal="0" :endVal="item" :duration="duration"></NumTo>
    </div>
  </div>
</template>

<script setup>
import { defineProps, watch, ref } from "vue";
import NumTo from "./src/vue-countTo.vue";

const props = defineProps({
  value: {
    type: [Number, String],
    default: 0,
  },
  // 长度 不足会补0
  length: {
    type: Number,
    default: 5,
  },
  duration: {
    type: Number,
    default: 2000
  }
});

const list = ref([]);

const reset = () => {
  list.value = Array(length).fill(0);
};

watch(
  () => props.value,
  (newValue) => {
    const str = String(newValue);
    const len = Math.max(props.length, str.length);
    const newStr = str.padStart(len, 0);
    reset()
    for (let i = 0; i < newStr.length; i++) {
      list.value.push(newStr[i] / 1);
    }
  },
  { immediate: true }
);

watch(
  () => props.length,
  () => {
    reset()
  }
);
</script>
<style scoped>
.number-list {
  display: flex;
  align-items: center;
}
</style>
